import * as React from 'react'

// 通过es6语法,直接接收传递过来的函数
// const Link = ({ active, children, onClick }) => (
//   // 这是每个show的按钮
//     <button
//        onClick={onClick}
//        disabled={active}
//        style={{
//            marginLeft: '4px',
//        }}
//     >
//       {children}--这是
//     </button>
// )

/**定义组件props */
export interface Props {
  onClick: ()=> void
  active: boolean
}
// 这是一个按钮组件,供其它组件会被调用多次
class Link extends React.Component<Props, object>  {
  constructor(props) {
    super(props);
    // 父组件传入了参数,
    // console.log("PRO:",this.props.onClick);
  }
  render() {// 这是组件渲染的内容
    return (
      <button
        // 传入的点击事件
        onClick={this.props.onClick}
        disabled={this.props.active}
        style={{
          marginLeft: '4px',
        }}
      >
      {/* 当前事件按钮的名称 */}
      {this.props.children}
    </button>
    );
  }
}


// 以下是可以单独在拆分一个文件,放在容器文件夹,也可放组件内整体使用
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../reduxConfig/actions' // 引入action动作

// 这是核心干活的二个函数
// 1、把所有的state转成props，放入对象里面
const mapStateToProps = (state, ownProps) => {
  return ({
    // 你可以自定义你要存的属性和值,返回的整体是对象
    active: ownProps.filter === state.visibilityFilter
  })
}

// 2、把所有的actions的dispatch灌进去,第二个参数是用户传入组件的值
const mapDispatchToProps = (dispatch, ownProps) => {
  // ownProps是使用此组件传入的参数(actions名称)
  // 每个点击事件你也可以理解成action用户的动作
  return ({
    // 添加处理函数事件(自定义函数),这个到时候会绑定到组件按钮上使用
    onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
    // dispatch里面派发action动作指令,当触发action时(传入的ownProps.filter),把相关用户动作送到 reducre中(index.js)-> visibilityFilter.js 去处理
  })
}

// 这是拆成二个文件（可以在组件内完成以上写法）
// 最终 redux连接的时候合并进去，把二个函数和组件Link合并吐出一个state->props
export default connect( mapStateToProps, mapDispatchToProps)(Link)
// 在此组件上可以使用 this.props.active值, this.props.onClick函数
// export default Link;
